<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="医院名称">
        <el-input v-model="hospitalSet.hosname"/>
      </el-form-item>
      <el-form-item error="" label="医院编号">
        <el-input v-model="hospitalSet.hoscode"/>
      </el-form-item>
      <el-form-item label="api基础路径">
        <el-input v-model="hospitalSet.apiUrl"/>
      </el-form-item>
      <el-form-item label="联系人姓名">
        <el-input v-model="hospitalSet.contactsName"/>
      </el-form-item>
      <el-form-item label="联系人手机">
        <el-input v-model="hospitalSet.contactsPhone"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import hospSetApi from '@/api/hospSet'

export default {
  data() {
    return {
      saveBtnDisabled: false,
      hospitalSet: {}
    }
  },

  created() {
    this.initPageInfo()
  },

  methods: {
    // 【添加或者修改讲师按钮点击事件】
    saveOrUpdate() {
      // 点击添加保存按钮后，就禁用掉这个按钮，防止表单重复提交
      this.saveBtnDisabled = true
      // 如果点击的是添加医院设置，那么是没有医院设置ID的，所以执行添加讲师事件
      if (!this.hospitalSet.id) {
        this.saveHospSet()
      } else {
        // 如果点击的是修改按钮，那么此时是已经通过路由拿到了医院设置ID的，所以执行修改事件
        this.modifyHospSet()
      }
    },
    // 初始化页面数据用于回显
    initPageInfo() {
      // 如果id存在说明是修改信息，则回显数据到表单页面
      if (this.$route.params.id) { // 这里拿到的id实际上是路由跳转那里，饿了么UI帮忙实现的
        console.log('从路由跳转拿到医院设置ID===>' + this.$route.params.id)
        // 通过ID查询医院设置列表
        hospSetApi.getHospSetById(this.$route.params.id).then((response) => {
          this.hospitalSet = response.data.hospitalSet
        })
      } else {
      // id不存在说明是添加讲师，则需要清空一下回显数据（浏览器默认帮做了，但是最好手动实现一下）
      // 这个操作实际上是为了防止万一我们是先点击了修改按钮，才点击添加按钮的话，防止在添加界面中还显示修改界面的数据
        this.hospitalSet = {}
      }
    },
    // 添加医院设置
    saveHospSet() {
      hospSetApi.saveHospSet(this.hospitalSet).then((response) => {
        this.$message.success('添加成功')
        // 路由跳转(注意如果不是本页面的路由，要加上$符号)
        this.$router.push({ path: '/hospSet/list' })
      })
    },
    // 修改医院设置
    modifyHospSet() {
      hospSetApi.updateHospSet(this.hospitalSet).then((response) => {
        // 路由跳转(注意如果不是本页面的路由，要加上$符号)
        this.$router.push({ path: '/hospSet/list' })
      })
    }

  }
}
</script>
